<template>
	<view class="h-screen flex flex-col">
		<NavBarVue title="充值"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30">
					<view class="">
						<template v-for="e,i in chargeList" :key="i">
							<view class="flex mb-20 justify-between items-center p-40 rounded-lg bg-white border-solid border-[transparent]"
								:class="[e.id == choose.id?'border-[#329EFF]':'']" v-if="e.eye==0" @click="handleChoose(e)">
								<text class="text-sm">{{e.title}}</text>
								<uni-icons type="right" size="20"></uni-icons>
							</view>
							<view class="border-[#FFD4A6] border-solid flex mb-20 bg-white justify-between items-center p-40 rounded-lg"
								:class="[e.id == choose.id?'border-[#329EFF]':'']" v-if="e.eye==1" @click="handleChoose(e)">
								<view class="flex flex-col">
									<text class="text-sm text-[#834710]">{{e.title}}</text>
									<text class="mt-20">{{e.name}}</text>
								</view>
								<uni-icons type="right" size="20"></uni-icons>
							</view>
						</template>
					</view>
					<!--  -->
					<view class="mt-10 mb-30">
						<text class="text-[#40647C]">我想了解VIP专属特权都有哪些 ></text>
					</view>
					<!--  -->
					<view class="bg-white rounded-lg">
						<radio-group @change="handleChange">
							<label class="flex justify-between p-30" v-for="e,i in playList" :key="i">
								<view class="flex items-center">
									<ImageBoxVue :src="e.icon" width="40rpx" height="40rpx"></ImageBoxVue>
									<text class="ml-10">{{e.text}}</text>
								</view>
								<view>
									<radio :value="e.key" :checked="e.key === playType" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mt-30 px-30">
			<button type="primary" class="rounded-full" @click="handleSubmit">确认支付</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	const playType = ref(1)
	const playList = [
		{
			icon: "/static/icons/wx.png",
			text: "微信支付",
			key: 1
		}, {
			icon: "/static/icons/zfb.png",
			text: "支付宝支付",
			key: 0
		}, {
			icon: "/static/icons/xcx.png",
			text: "小程序支付",
			key: "xcx"
		}, {
			icon: "/static/icons/apple.png",
			text: "苹果支付",
			key: "apple"
		// }, {
		// 	icon: "/static/icons/red_diamond.png",
		// 	text: "其他支付方式",
		// 	key: "redDiamond"
		}, 
	]
	const chargeList = ref([])
	const choose = ref({})
	const loading = ref(false)
	
	onLoad(() => {
		getList()
	})
	const getList = () => {
		userApi.getChongconfiglist({}).then(res => {
			chargeList.value = res.data
		})
	}
	const handleChoose = (item) => {
		if (choose.value.id != item.id) {
			choose.value = item
		}
	}
	
	const handleChange = (ext) => {
		playType.value = ext.detail.value
	}
	
	const handleSubmit = () => {
		if (!choose.value.id) {
			uni.showToast({
				icon: "none",
				title: "请选择充值金额！"
			})
			return
		}
		if (loading.value) {
			return
		}
		loading.value = true;
		const opt = {
			'member.id': uni.getStorageSync('user').id,
			'chongconfig.id': choose.value.id,
			sts: playType.value
		}
		console.log(opt)
		userApi.memberApplyPayOrder(opt).then(res => {
			loading.value = false
			var orderInfo = res.data.alibody;  //从服务器获取的订单
			uni.getProvider({
				service: 'payment',
				success: function (res) {
					console.log(res.provider)
					if (~res.provider.indexOf('alipay')) {
						uni.requestPayment({
							"provider": "alipay",   //固定值为"alipay"
							"orderInfo": orderInfo, //此处为服务器返回的订单信息字符串
							success: function (res) {
								var rawdata = JSON.parse(res.rawdata);
								console.log(rawdata);
								console.log("支付成功");
							},
							fail: function (err) {
								console.log('支付失败:' + JSON.stringify(err));
							}
						});
					}
				}
			});

		})
	}
</script>

<style>

</style>